@import '../../styles/settings.scss';

.m-picker-header {
  display: flex;
  align-items: center;
  @include hairlineBottom($hairlineColor);

  &__cancel {
    padding: transformPx(10) transformPx(15);
    flex-shrink: 0;
    font-size: transformPx(17);
    color: $grayColor;

    &_hidden {
      visibility: hidden;
      opacity: 0;
      pointer-events: none;
    }

    &_active {
      opacity: 0.6;
    }
  }

  &__title {
    flex-grow: 1;
    text-align: center;
    margin: 0 transformPx(15);
    font-size: transformPx(19);
    color: #000;
    @include ellipsis;
  }

  &__confirm {
    padding: transformPx(10) transformPx(15);
    flex-shrink: 0;
    font-size: transformPx(17);
    color: $primaryColor;

    &_active {
      opacity: 0.6;
    }
  }
}

